<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/jquery.textcomplete.css' />
    <link rel="stylesheet" href="/stylesheets/side-menu.css">
    <link rel="stylesheet" href="/stylesheets/jquery-ui.min.css">
    <link rel='stylesheet' href='/stylesheets/style.css' />

    <% include statsheader %>

</head>
<body>
<% include statsabove %>
<div id="wrapperService">
<div id="layout">
    <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="menu-link">
        <!-- Hamburger icon -->
        <span></span>
    </a>

    <%- include('components/common/menu') %>




    <div id='content'>

        <div id='welcomemessage'>

            Import any data to your graph from the following sources:
            <% include messages %>

            <form action='/import' name='submitform' id="submitform" method='post' class='pure-form pure-form-stacked'>
                <br>
                Please, upload your file:
                <% if (!evernote) { %>

                  <label for="source7" class="pure-radio">
                      <input id="source7" type="radio" name="source" value="url">
                      Any Web URL Page / Wikipedia
                  </label>
                  <label for="source6" class="pure-radio">
                      <input id="source6" type="radio" name="source" value="rss">
                      RSS / News Feeds
                  </label>
                  <label for="source8" class="pure-radio">
                      <input id="source8" type="radio" name="source" value="google">
                      Google Search Results
                  </label>
                <label for="source1" class="pure-radio">
                    <input id="source1" type="radio" name="source" value="twitter" checked>
                    Twitter
                </label>
                <label for="source2" class="pure-radio">
                <input id="source2" type="radio" name="source" value="evernote">
                    Evernote (<a href="/evernote_oauth">authorize</a>)
                </label>
                <label for="source3" class="pure-radio">
                    <input id="source3" type="radio" name="source" value="email">
                    iPhone / Gmail notes
                </label>
                <!--<label for="source4" class="pure-radio">
                    <input id="source4" type="radio" name="source" value="gkg">
                    Get Connections for Entity
                </label>-->
                <label for="source5" class="pure-radio">
                    <input id="source5" type="radio" name="source" value="file">
                    Upload a File
                </label>
             <!--   <label for="source6" class="pure-radio">
                    <input id="source6" type="radio" name="source" value="googlesearch">
                    Google Search
                </label>-->
                <div id="inputplace"></div>

                <br>

                <div id="extracttwitter">
                Extract:
                <label for="extract1" class="pure-radio">
                    <input id="extract1" type="radio" name="extract" value="user">
                    graph of words used by a user
                </label>

                    <label for="extract2" class="pure-radio">
                        <input id="extract2" type="radio" name="extract" value="timeline">
                        graph of words in user's timeline
                    </label>

                <label for="extract3" class="pure-radio">
                    <input id="extract3" type="radio" name="extract" value="hashtag">
                    graph of words used with a hashtag
                </label>

               <label for="extract4" class="pure-radio">
                        <input id="extract4" type="radio" name="extract" value="tophashtag" checked>
                        top tweets in english with a hashtag
               </label>


                <label for="extract5" class="pure-radio">
                        <input id="extract5" type="radio" name="extract" value="lists">
                        tweets from a list
                </label>

                <label for="extractfilter" class="pure-checkbox">
                        <input id="extractfilter" type="checkbox" name="excludesearchterm" value="1"> exclude search term from the graph<br>
                </label>

                    <label for="showtwitters" class="pure-checkbox">
                        <input id="showtwitters" type="checkbox" name="showtwitters" value="1"> show originating twitter accounts in graph<br>
                    </label>

                    <label for="onlymentions" class="pure-checkbox">
                        <input id="onlymentions" type="checkbox" name="onlymentions" value="1"> make a graph of twitter users only<br>
                    </label>

                    <label for="excludementions" class="pure-checkbox">
                        <input id="excludementions" type="checkbox" name="excludementions" value="1" checked> exclude all twitter users from graph<br>
                    </label>

                <br>

                </div>




                <div id="searchtermbox">
                Account / Hashtag / Searchterm:
                <br>

                <input type='text' name='search' id="search" placeholder='@username or #hashtag' value="<% if (fornode) { %><%= fornode %><% } %>" />
                <br>
                </div>

                <div id="listview" style="display: none">
                   &nbsp;<br>
                    Name of the list (slug):
                    <br>
                    <input type="text" name="listname" id="listname" value="" placeholder='dataviz' />

                </div>

                <div id="emailbox" style="display: none">
                    Your account details:
<br>
                    <input type="text" name="email" id="searchbox1" value="your@email.com" />
                    <input type="password" name="password" id="searchbox2" value="password" />
                    <input type="text" name="host" id="searchbox3" value="imap.gmail.com" />
                    <input type="text" name="tls" id="searchbox4" value="true" />
                    <input type="text" name="port" id="searchbox5" value="993" />
                    <br>Your e-mail and password are not saved, <br>only sent to the server.  <br>
                </div>

                <div id="filebox" style="display: none">
                    <input type="file" name="uploadedFile" />
<br>&nbsp;<br>
                    <label for="file1" class="pure-radio">
                        <input id="file1" type="radio" name="filetype" value="amazon">
                        import Amazon Kindle Highlights (<a href="/images/amazon-import.jpg" target="_blank">help</a>)
                    </label>

                    <label for="file2" class="pure-radio">
                        <input id="file2" type="radio" name="filetype" value="zettel">
                        import Zettelnotes file
                    </label>

                    <label for="file3" class="pure-radio">
                        <input id="file3" type="radio" name="filetype" value="other" checked>
                        other filetype: PDF, TXT
                        <br>max 90Kb of text,<a href="https://noduslabs.com/contact/">contact us</a> for longer)
                    </label>
                    <br>
                    <label for="titlefield" class="pure-radio" id="titlefieldcaption">
                        Separate into contexts based on html class<br>
                        or leave empty to import everything in one.
                        <input type="text" name="titlefield" id="titlefield" readonly="false" value=""/>
                    </label>
                    <br>
                    <label for="processfield" class="pure-radio" id="processfieldcaption">
                        Statements to import are in the class
                        <input type="text" name="processfield" id="processfield" readonly="false" value=""/>
                    </label>

                </div>

                <div id="limitgkg" style="display: none">
                    <br>
                    Max Number of Connections:
                    <br>
                    <input type="text" name="limitgkg" id="limitgkgimport" value="7" size="2" maxlength="2" />
                    <br>
                </div>

                <br>&nbsp;<br>
                Save in Context:
                <br>
                <input type='text' name='context' value='<% if (context) { %><%= context %><% } else { %>imported<% } %>'/>
                <br>

                <% } else { %>
                <label for="source2" class="pure-radio">
                    <input id="source2" type="radio" name="source" value="evernote" checked>
                    Evernote (<a href="/evernote_clear">deauthorize</a>)
                </label>
                <label for="source1" class="pure-radio">
                    <input id="source1" type="radio" name="source" value="twitter" disabled>
                    Twitter
                </label>
                <br>

                Extract:
                <label for="extract1" class="pure-radio">
                    <input id="extract1" type="radio" name="extract" value="user" checked>
                    graph of words used in all the entries
                </label>
                <br>

                Evernote Account:
                <input type='text' name='search' value="<%= evernote %>" readonly/>
                <br>


                Import Notebooks:
                <br>
                <% if (notebooks) { for (var i=0; i<notebooks.length; i++) { %>
                <input type="radio" name="notebooks" value="<%= notebooks[i] %>"> <%= notebooks[i] %><br>
                <% } }  %>

                <br>
                &nbsp;
                <input type='hidden' name='context' value='<% if (context) { %><%= context %><% } else { %>imported<% } %>'/>
                <br>
                <% } %>


                <div id="howmanyposts">
                How Many Recent Posts:
                <input type='text' name='limit' value='100' />
                <br>
                </div>

                <div id="importsettings">
                Settings:
                <label for="settings1" class="pure-radio">
                    <input id="settings1" type="radio" name="settings" value="morphemes" checked>
                    Process both hashtags and words
                </label>

                <label for="settings2" class="pure-radio">
                    <input id="settings2" type="radio" name="settings" value="hashtags">
                    Process only hashtags
                </label>
                <br>
                </div>

                <input type="hidden" id="selectedContexts" name="selectedContexts" value="">
                <input type="hidden" name="statementid" value="">
                &nbsp;<br>
                <input type='submit' name="submit" value="save" class="pure-button pure-button-primary">

            </form>   &nbsp;<br>&nbsp;<br>





        </div>

        <div id="graph-container"></div>


    </div>




</div>
</div>


<script src="/javascripts/jquery.min.js"></script>
<script src="/javascripts/jquery-ui.min.js"></script>
<script src="/javascripts/string.min.js"></script>
<script src="/javascripts/underscore-min.js"></script>
<script src="/javascripts/jquery.textcomplete.js"></script>
<script src='/javascripts/jquery.autosize.js'></script>
<script src="/javascripts/ui.js"></script>
<script src="/javascripts/jquery.mobile-events.min.js"></script>


<script>
    ;(function(){

            <% if (context && fornode) { %>

            <% } %>

        $('form#submitform').submit(function(){
            $(this).find('input[type=submit]').attr('disabled', 'disabled');
        });

        // toggle email login controls on and off with radio

            var radioButtons = $("[name=source]"); // get both radiobuttons
            var radioButtons2 = $("[name=extract]"); // get both radiobuttons
            var radioButtons3 = $("[name=filetype]"); // get both radiobuttons

            var searchbox  = $("#searchbox");
            var filebox = $("#filebox");
            $("#googlesearch").hide();

            $("#processfield").hide();
            $("#processfieldcaption").hide();
            $("#titlefield").hide();
            $("#titlefieldcaption").hide();

        radioButtons.change(function () {
                if( $(this).val() === "email" ) { // this time, we do need to check the value
                    searchbox.show();
                    $("#limitgkg").hide();
                    $("#extracttwitter").hide();
                    $("#howmanyposts").show();
                    $("#importsettings").show();
                    $("#searchtermbox").hide();
                    $("#emailbox").show();
                    $("#googlesearch").hide();

                    filebox.hide();

                }
                // else if( $(this).val() === "file" ) { // this time, we do need to check the value
                //     filebox.show();
                //     $("#searchtermbox").hide();
                //     $("#limitgkg").hide();
                //     $("#extracttwitter").hide();
                //     $("#importsettings").hide();
                //     $("#googlesearch").hide();
                //       $("#emailbox").hide();
                //
                // }
                else if ($(this).val() === "evernote") {
                    window.location.href = "/evernote_oauth";
                    $("#limitgkg").hide();
                    $("#extracttwitter").hide();
                    $("#searchtermbox").hide();
                    $("#howmanyposts").show();
                    $("#importsettings").show();
                    $("#emailbox").hide();
                    $("#googlesearch").hide();

                    filebox.hide();


                }
                else if ($(this).val() === "rss") {
                  var addparams = '';
                  <% if (context) { %>
                    addparams = '?context=<%= context %>';
                  <% } %>
                    window.location.href = "/importrss" + addparams;
                }
                else if ($(this).val() == "file") {
                  var addparams = '';
                  <% if (context) { %>
                    addparams = '?context=<%= context %>';
                  <% } %>
                    window.location.href = "/import/files" + addparams;
                }
                else if ($(this).val() === "url") {
                  var addparams = '';
                  <% if (context) { %>
                    addparams = '?context=<%= context %>';
                  <% } %>
                    window.location.href = "/importurl" + addparams;
                }
                else if ($(this).val() === "google") {
                    var addparams = '';
                    <% if (context) { %>
                      addparams = '?context=<%= context %>';
                    <% } %>
                    <% if (fornode) { %>
                      addparams += '&fornode=<%= fornode %>';
                    <% } %>
                    window.location.href = "/google" + addparams;
                }
                else if ($(this).val() === "gkg") {
                    $("#settings1").prop("checked", false);
                    $("#settings2").prop("checked", true);
                    $("#searchtermbox").show();
                    $("#emailbox").hide();
                    $("#limitgkg").show();
                    $("#extracttwitter").hide();
                    $("#howmanyposts").hide();
                    $("#importsettings").hide();
                    $("#googlesearch").hide();

                    filebox.hide();


                }
                else if ($(this).val() === "lists") {
                    $("#listview").show();
                }
                else if ($(this).val() === "googlesearch") {
                    $("#settings2").prop("checked", false);
                    $("#settings1").prop("checked", true);
                    $("#emailbox").hide();
                    $("#limitgkg").hide();
                    $("#extracttwitter").hide();
                    $("#googlesearch").show();
                    filebox.hide();

                }
                else
                {
                    $("#limitgkg").hide();
                    $("#extracttwitter").show();
                    $("#howmanyposts").show();
                    $("#importsettings").show();
                    $("#emailbox").hide();
                    filebox.hide();
                    $("#searchtermbox").show();
                    $("#googlesearch").hide();




                }
            });

        radioButtons2.change(function () {
            if ($(this).val() === "lists") {
                $("#listview").show();
            }
            else
            {
                $("#listview").hide();
            }
        });

        // Later we can add more functions here
        radioButtons3.change(function () {
            if ($(this).val() === "zettel") {
              $("#processfield").show();
              $("#titlefield").show();
              $("#processfieldcaption").show();

              $("#titlefieldcaption").show();
                $("#processfield").val('zettelcontent');
                $("#titlefield").val('');

            }
            else if ($(this).val() === "amazon")
            {
              $("#processfield").show();
              $("#titlefield").show();
              $("#processfieldcaption").show();

              $("#titlefieldcaption").show();
                $("#processfield").val('highlight');
                $("#titlefield").val('title');


            }
            else if ($(this).val() === "other")
            {
              $("#processfield").hide();
              $("#titlefield").hide();
              $("#processfieldcaption").hide();

              $("#titlefieldcaption").hide();
                $("#processfield").val('');
                $("#titlefield").val('');

            }
        });



    })();
    $("#addNewContext").on('tap', function(e) {

        $("#addcontextinput").css("visibility", "visible");
        $("#add").css("visibility", "visible");
        $("#addcontextname").focus();


    });

    $('#addcontextinput').submit(function(e) {
        e.preventDefault(); // to stop the form from submitting
        if ($('#addcontextname').val().length > 0) {
            var contextredirect = $('#addcontextname').val();
            contextredirect = contextredirect.replace(/[\.,-\/#!$%\^&\*;:{}=\-_`~()]/g,"");
            contextredirect = contextredirect.replace(/[^\w]/gi, '');
            window.location.href = "/<%= user.name %>/" + contextredirect + '/edit';
        }

    });

</script>




<% include statsbelow %>
</body>
</html>
